<template>
  <div class="app-container">
    <div class="header">
      <el-form :inline="true" :model="queryParams" ref="ruleFormRef">
        <el-form-item label="银行名" prop="bankName">
          <el-input prefix="1" v-model="queryParams.bankName" placeholder="请输入银行名" />
        </el-form-item>
        <el-form-item label="银行编号" prop="bankNum">
          <el-input v-model="queryParams.bankNum" placeholder="请输入要搜索的银行编号">
          </el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="完成状态"
            clearable
            @keyup.enter.native="getPageList"
          >
            <el-option
              v-for="dict in dict.type.sys_normal_disable"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getPageList" icon="Search">查询</el-button>
          <el-button icon="Refresh" @click="reset(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <div class="util">
        <el-button
          type="primary"
          icon="CirclePlus"
          @click="handleAdd"
        >
          新增
        </el-button>
      </div>
      <div class="table-inner">
        <el-table v-loading="loading" :data="tableData" border>
          <el-table-column label="ID" prop="bankId" width="100" align="center"></el-table-column>
          <el-table-column label="银行名" prop="bankName" width="200" align="center"></el-table-column>
          <el-table-column label="主行地址" prop="bankAddress" align="center"></el-table-column>
          <el-table-column label="银行图标" prop="bankIcon" width="180" align="center">
            <template #default="scope">
              <SvgIcon :icon-class="scope.row.icon" class-name="icon" />
            </template>
          </el-table-column>
          <el-table-column label="银行编号" prop="bankNum" width="200" align="center"></el-table-column>
          <el-table-column prop="state" label="状态" align="center" width="150">
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                @change="handleChangeStatus(scope.row)"
                active-value="0"
                inactive-value="1"
                inline-prompt
                active-color="#599e5e"
                inactive-color="red"
                active-text="启用"
                inactive-text="禁用"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark" align="center"></el-table-column>
          <el-table-column label="更新时间" prop="updateTime" width="180px" align="center"
                           :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                icon="Edit"
                :disabled="scope.row.ratingStatus == 1"
                @click="handleEdit(scope.row)">
                编辑
              </el-button>
              <el-button
                type="info"
                size="small"
                icon="View"
                @click="handlerGetInfo(scope.row)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <!--分页器            -->
        <el-pagination
          v-show="total > 0"
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[5, 10, 15, 20, 25, 30]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="getList"
          @current-change="getList"
        />
      </div>
    </div>

    <BankDialog ref="bankDialogRef" v-model:getList="getList"></BankDialog>
  </div>
</template>
<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { FormInstance } from "element-plus";
import BankDialog from "./components/banksDialog.vue"
import { reqAreaTreeSelect, reqUserChangeStatusUrl } from "@/api/system/user";
import { reqTableData } from "@/api/type";
import { reqCreResfresh, reqCreditScoring } from "@/api/credit/peasants/maintain";
import { useRouter } from "vue-router";
import { reqBankChangeStatusUrl, reqLoansBanksPageList } from "@/api/credit/loans/bank";
import SvgIcon from "@/components/SvgIcon/index.vue";
const { proxy }: any = getCurrentInstance();
const $router = useRouter();

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  bankName: undefined, // 银行姓名
  bankNum: undefined, // 银行编号
  status: undefined, // 银行状态
});

const total = ref(0);
const loading = ref(true);
const tableData = ref();
const ruleFormRef = ref();
const bankDialogRef = ref();// 对话框ref


// 查询按钮
const getPageList = () => {
  queryParams.pageNum = 1;
  getList();
};

// 新增银行信息
const handleAdd = () => {
  let bankId = null;
  bankDialogRef.value.show(bankId);
}

// 修改
const handleEdit = (item = {}) => {
  let bankId = item.bankId;
  bankDialogRef.value.show(bankId);
};

// 分页查询
const getList = async () => {
  loading.value = true;
  await reqLoansBanksPageList(queryParams).then((req: reqTableData) => {
    if (req.code == 200) {
      tableData.value = req.rows;
      total.value = req.total;
    } else {
      proxy.$modal.msgError(req.message);
    }
  });
  loading.value = false;
};

// 重置按钮
const reset = (formEl: FormInstance | undefined) => {
  // 将数据置空
  formEl.resetFields();
  Object.keys(queryParams).forEach((key) => {
    if (key === "pageNum") queryParams[key] = 1;
    else if (key === "pageSize") queryParams[key] = 10;
    else if (key === "status") queryParams[key] = '0';
    else queryParams[key] = undefined;
  });
  // 再次进行查询
  getPageList();
};

// 修改银行状态
const handleChangeStatus = (row: any) => {
  let text = row.status == "0" ? "启用" : "停用";
  proxy.$modal
    .confirm("确认要\"" + text + "\"\"" + row.bankName + "\"该银行吗？")
    .then(async () => {
      await reqBankChangeStatusUrl({ bankId: row.bankId, status: row.status })
        .then((req: any) => {
          if (req.code === 200) {
            proxy.$modal.msgSuccess(text + "成功!");
          } else {
            proxy.$modal.msgError(text + "失败！" + req.message);
            row.status = row.status === '0' ? '1' : '0'
          }
        })
        .catch(() => {
          row.status = row.status === '0' ? '1' : '0'
        });
    })
    .catch(() => {
      row.status = row.status === '0' ? '1' : '0'
    });
}

// 查看详情
const handlerGetInfo = (item: any) => {
  // 根据id获取详情

  // 进行展示即可

}


onMounted(async () => {
  // 进行分页查询
  await getPageList();
});

</script>

<script lang="ts">
export default {
  dicts: ["sys_normal_disable", "pea_sex", "pea_finish_status", "pea_rating_status", "pea_score_status"]
};
</script>

<style scoped lang="scss">
@import './index';

</style>
